<template>
    <div class="game-details">
        <div class="game-name">
            游戏库-{{ gameDetails.game_info?.name }}
        </div>
        <div class="game-info">
            <img src="./images/skin-jpg.webp" alt="" width="100%">
            <div class="handle-box">
                <div class="wrap">
                    <nut-button> 立即下载</nut-button>
                    <div class="pub-box" @click="clickSubscribe">
                        <img v-if="isPub"
                             src="./images/pub-checked.webp"
                             alt="">
                        <img v-else src="./images/pub.webp" alt="">
                        <div class="pub-text">
                            收取遊戲通知信件
                        </div>
                    </div>
                    <div class="line"></div>

                    <div class="collect-box" @click="clickCollect">
                        <img v-if="isCollect"
                             src="./images/collect-checked.webp"
                             alt="">
                        <img v-else src="./images/collect.webp" alt="">
                        <div class="collect-text">
                            加入至我的最爱
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <game :game_info="gameDetails.game_info"></game>
        <!-- 游戏详情 -->
        <div class="game-detail">
            <div class="detail-wrap" :class="{ unfold: isUnfold }">
                <div class="title">
                    - 游戏详情
                </div>
                <div v-for="item in 4" :key="item" class="item">
                    <div>
                        <div class="sub-title">
                            主要特色
                        </div>
                        <div class="content">
                            你已在一个未来的世界中醒来作为一队急切想要为你服务的雇佣兵的队长。你准备好面对你将要遇到的挑战了吗？那就勇往直前，向他们证明你是他们曾经有过的最好的队长！
                        </div>
                        <img src="./images/order-game1.webp" alt="">
                    </div>
                </div>
            </div>
            <nut-divider v-if="!isUnfold" @click="isUnfold = !isUnfold">
                <div class="read-more">
                    <span>阅读更多</span>
                    <div class="triangle"></div>
                </div>
            </nut-divider>
        </div>
        <!-- 其他游戏 -->
        <div class="order-game">
            <div class="part">
                <div class="title">
                    - 发行商其他游戏
                </div>
                <div class="list">
                    <div v-for="item in 10" :key="item" class="item">
                        <img src="./images/order-game.webp" alt="">
                        <div>EVERLUSTING LIFE</div>
                    </div>
                </div>
            </div>
            <div class="part">
                <div class="title">
                    - 同类型的其他游戏
                </div>
                <div class="list">
                    <div v-for="item in 10" :key="item" class="item">
                        <img src="./images/order-game.webp" alt="">
                        <div>EVERLUSTING LIFE</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 用户讨论区 -->
        <div class="user-discuss">
            <div class="title">
                - 用户讨论区
            </div>

            <div class="part-wrap">
                <div class="part"
                     :style="{
                         height: isUnfold_discuss ? 'fit-content' : '504px',
                     }">
                    <div class="item-top">
                        <div class="top">
                            <div class="top-tag">
                                <img src="./images/start.webp" alt="">
                                <span>置顶</span>
                            </div>
                            <div>
                                <div class="praise">
                                    <img src="./images/praise-white.webp"
                                         alt="">
                                    <span>12k</span>
                                </div>
                                <div class="comment">
                                    <img src="./images/comment.webp" alt="">
                                    <span>3,383</span>
                                </div>
                            </div>
                        </div>
                        <div class="item-content">
                            <div class="left">
                                <div>
                                    <img src="./images/avatar.webp" alt="">
                                    <div>
                                        <div>黄油小郎君</div>
                                        <div class="tag">
                                            · 已注册188天
                                        </div>
                                        <div class="tag">
                                            · 已玩游戏78
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <nut-button> #平台指南</nut-button>
                                    <nut-button> #LUST GODDESS</nut-button>
                                </div>
                            </div>
                            <div class="right">
                                <div class="con">
                                    看在色色女角的份上還是繼續玩了，官方請快開發一個安卓手機也能玩
                                    STEAMI的APP吧！ -----
                                    花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善，你不花錢就永遠卡在20級聯盟左右，而且勝場只有30點敗場就扣60點的設計也相當差。
                                </div>
                                <div class="pic-list">
                                    <img v-for="item in 10"
                                         :key="item"
                                         src="./images/game-con.webp"
                                         alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-for="item in 5" :key="item" class="item">
                        <div style="width: 110px; flex-shrink: 0"></div>
                        <div class="right">
                            <div class="top">
                                <div>
                                    <img src="./images/avatar.webp" alt="">
                                    <div class="name">
                                        黄油小郎君
                                    </div>
                                    <div class="tag">
                                        · 已注册188天
                                    </div>
                                    <div class="tag">
                                        · 已玩游戏78
                                    </div>
                                </div>
                                <div class="praise">
                                    <img src="./images/praise-white.webp"
                                         alt="">
                                    <span>12k</span>
                                </div>
                            </div>
                            <div class="con">
                                <div>
                                    ※引述《黄油小郎君》之銘言看在色色女角的份上還是續玩了，官方請快開發一個安卓手機也能玩STEAM的APP吧！
                                </div>
                                <div>
                                    花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善。
                                </div>
                            </div>
                            <div class="pic-list">
                                <img v-for="item in 10"
                                     :key="item"
                                     src="./images/game-con.webp"
                                     alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="!isUnfold_discuss"
                     class="read-more"
                     @click="isUnfold_discuss = true">
                    <span>阅读更多</span>
                    <div class="triangle"></div>
                </div>
            </div>
        </div>
        <!-- 最新消息 -->
        <div class="new-message">
            <div class="title">
                - 最新消息
            </div>
            <div v-for="item in 2" :key="item" class="item">
                <img src="./images/cover2.webp" alt="">
                <div>
                    <div class="sub-title">
                        <span>标题：更新通告或者活动通知</span>
                        <span>2025-1-1发布</span>
                    </div>
                    <div class="content">
                        文章内容文章内容文章内容文章内容文章内容文章内容文章内容文文章内容文章内容文章内容文章内容文章内容文章内容文章内容文文章内容文章内容文章内容文章内容文
                    </div>
                    <div class="button-box">
                        <nut-button> 详情</nut-button>
                        <nut-button> 查看该游戏</nut-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'
import Game from '@pages/article-detail/NewMessage/components/Game.vue'

const route = useRoute()
const isUnfold = ref(false) // 是否展开
const isUnfold_discuss = ref(false) // 是否展开

const gameDetails = ref({})

const getGameDetails = () => {
    axiosService
        .post('/api/Game/detail', { id: route.query.id })
        .then((res) => {
            console.log('游戏详情 -->', res.data)
            gameDetails.value = res.data
            isCollect.value = res.data.game_info.is_favorite
        })
        .catch((err) => {
            showNotify.danger(err.msg)
        })
}
getGameDetails()

// 订阅游戏
const isPub = ref(false)
const clickSubscribe = () => {
    isPub.value = !isPub.value
    const data = {
        game_id: gameDetails.value.game_info.id,
        type: isPub.value ? '1' : '2' // 1订阅 /2取消订阅
    }
    axiosService
        .post('/api/User/noticeGame', data)
        .then((res) => {
            console.log('=>(index.vue:242) res', res)
            showNotify.success(res.msg)
            getGameDetails()
        })
        .catch((err) => {
            showNotify.danger(err.msg)
        })
}

// 收藏
const isCollect = ref(false)
const clickCollect = () => {
    axiosService
        .post('/api/User/favorite', { game_id: gameDetails.value.game_info.id })
        .then((res) => {
            console.log('=>(index.vue:242) res', res)
            showNotify.success(res.msg)
            getGameDetails()
        })
        .catch((err) => {
            showNotify.danger(err.msg)
        })
}
</script>

<style scoped lang="scss">
.game-details {
    width: 100%;
    min-height: 100vh;
    background-color: #2a2a2a;
    color: #fff;

    .read-more {
        display: flex;
        align-items: center;
        color: #fff;
        gap: 5px;

        .triangle {
            width: 0;
            height: 0;
            border-top: 8px solid #339ede;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }

    .game-name {
        font-size: 12px;
        color: #fff;
        padding-left: 15px;
    }

    .handle-box {
        height: 112px;
        background: #1c1c1c;

        .wrap {
            background: #3f3f3f;
            transform: translateY(-38%);
            width: 70%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px 5px 15px 5px;
            border-radius: 4px;

            .nut-button {
                width: 70%;
                background: #eb49a8;
                border: none;
                color: #fff;
            }

            .pub-box {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fefeff;
                gap: 5px;
                font-size: 14px;
                margin-top: 10px;

                img {
                    width: 14px;
                }
            }

            .line {
                width: 100%;
                height: 1px;
                background: #595959;
                margin-top: 10px;
            }

            .collect-box {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fefeff;
                gap: 5px;
                font-size: 14px;
                margin-top: 15px;
                font-weight: bold;

                img {
                    width: 14px;
                }
            }
        }
    }

    .game-content {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        background: #3f3f3f;
        padding: 15px;
        gap: 10px;
        height: fit-content;

        .right-box {
            flex: 1;

            .title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                &>span:first-child {
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                }

                &>span:last-child {
                    font-size: 12px;
                    color: #a5a5a5;
                }
            }

            .desc,
            .hint {
                font-size: 12px;
                line-height: 12px;
            }

            .hint {
                margin-top: 10px;
            }

            .info {
                display: flex;
                align-items: end;
                justify-content: space-between;
                font-size: 12px;
                margin-top: 10px;

                .left {
                    &>div {
                        display: flex;
                        align-items: center;

                        .label {
                            font-weight: bold;
                            width: 60px;
                        }
                    }

                    .dp {
                        margin-top: 5px;
                        gap: 20px;

                        &>div {
                            display: flex;
                            align-items: center;
                            gap: 4px;

                            img {
                                width: 14px;
                            }
                        }
                    }
                }

                .score {
                    width: 100px;
                    height: 100px;
                    background: url(./images/score-bg.webp);
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    line-height: 1em;
                    gap: 4px;

                    &>div:first-child {
                        display: flex;
                        align-items: start;
                        gap: 4px;

                        &>span:first-child {
                            font-size: 30px;
                            line-height: 1em;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }

    .order {
        display: flex;
        background: #3f3f3f;
        padding: 10px 0;
        overflow-x: auto;
        gap: 5px;

        img {
            width: 150px;
        }
    }

    .game-detail {
        background: #1c1c1c;
        padding: 10px 15px;

        .detail-wrap {
            max-height: 400px;
            overflow-y: hidden;
            position: relative;

            &::after {
                content: '';
                width: 100%;
                height: 200px;
                background: linear-gradient(to bottom, rgba(28, 28, 28, 0), #1c1c1c);
                position: absolute;
                bottom: 0;
                left: 0;
            }

            .item {
                margin: 10px 0;
                font-size: 12px;

                .sub-title {
                    color: #ea49a7;
                }

                .content {
                    color: #d6d6d6;
                }

                img {
                    width: 100%;
                    height: 100px;
                    margin-top: 10px;
                }
            }
        }

        .unfold {
            max-height: fit-content;

            &::after {
                display: none;
            }
        }

        .nut-divider {
            color: #339ede;
            margin: 0;
        }
    }

    .order-game {
        padding: 0 20px;
        background: #1c1c1c;
        overflow: hidden;

        .part {
            margin: 10px 0;

            .title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
            }

            .list {
                display: flex;
                align-items: center;
                gap: 20px;
                overflow-x: auto;

                .item {
                    img {
                        width: 150px;
                    }

                    div {
                        font-size: 12px;
                        text-align: center;
                    }
                }
            }
        }
    }

    .user-discuss {
        padding: 20px;

        &>.title {
            font-weight: bold;
            margin: 10px;
        }

        .part-wrap {
            border: solid 1px #6d6d6d;
            border-radius: 5px;
            background: #1c1c1c;

            .part {
                padding: 10px;
                overflow: hidden;

                .item-top {
                    border-bottom: solid 1px #595959;
                    padding-bottom: 10px;

                    .top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .top-tag {
                            background: url(./images/top-bg.webp);
                            background-size: 100% 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 120px;
                            height: 30px;
                            font-size: 14px;
                            font-weight: bold;
                            transform: translate(18px, -11px);
                            gap: 5px;

                            img {
                                width: 16px;
                            }
                        }

                        &>div:last-child {
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                            gap: 10px;

                            img {
                                width: 14px;
                            }

                            .praise,
                            .comment {
                                display: flex;
                                align-items: center;
                                gap: 4px;
                            }

                            .praise {
                                background: #eb49a8;
                                border-radius: 99px;
                                padding: 1px 15px;
                            }

                            .comment {
                                img {
                                    transform: translateY(1px);
                                }
                            }
                        }
                    }

                    .item-content {
                        display: flex;
                        align-items: start;
                        justify-content: space-between;
                        gap: 10px;

                        .left {
                            flex-shrink: 0;
                            width: 110px;

                            &>div:first-child {
                                display: flex;
                                align-items: start;
                                gap: 10px;

                                img {
                                    width: 30px;
                                }

                                &>div {
                                    font-size: 14px;

                                    .tag {
                                        font-size: 10px;
                                        color: #a4a4a4;
                                        line-height: 14px;
                                    }
                                }
                            }

                            &>div:last-child {
                                display: flex;
                                flex-direction: column;
                                align-items: start;
                                gap: 10px;
                                margin-top: 20px;

                                .nut-button {
                                    background: #339ede;
                                    border: none;
                                    color: #fff;
                                    height: 20px;
                                    font-size: 10px !important;
                                    padding: 0 5px;
                                }
                            }
                        }

                        .right {
                            margin-top: 5px;
                            flex: 1;
                            overflow: hidden;

                            .con {
                                font-size: 12px;
                                line-height: 16px;
                            }

                            .pic-list {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                overflow-x: auto;
                                margin-top: 20px;

                                img {
                                    width: 120px;
                                }
                            }
                        }
                    }
                }

                .item {
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                    gap: 10px;
                    padding: 10px 0;
                    border-bottom: solid 1px #595959;

                    .right {
                        flex: 1;
                        overflow: hidden;

                        .top {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            white-space: nowrap;

                            &>div {
                                display: flex;
                                align-items: center;
                            }

                            &>div:first-child {
                                gap: 5px;
                            }

                            img {
                                width: 20px;
                            }

                            .name {
                                font-size: 12px;
                            }

                            .tag {
                                font-size: 8px;
                                color: #a4a4a4;
                            }

                            .praise {
                                background: #eb49a8;
                                border-radius: 99px;
                                line-height: 1em;
                                font-size: 10px;
                                padding: 4px 8px;

                                img {
                                    width: 9px;
                                }
                            }

                        }

                        .con {
                            font-size: 12px;
                            line-height: 16px;

                            &>div:first-child {
                                color: #8b8b8b;
                                margin: 10px 0;
                            }
                        }

                        .pic-list {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            overflow-x: auto;
                            margin-top: 20px;

                            img {
                                width: 120px;
                            }
                        }
                    }
                }
            }

            .read-more {
                justify-content: center;
                margin: 10px 0;
            }
        }


    }

    .new-message {
        background: #1c1c1c;
        padding: 20px;

        .title {
            font-weight: bold;
        }

        .item {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 10px;
            font-size: 14px;
            margin: 20px 0;

            img {
                flex-shrink: 0;
                width: 110px;
            }

            .sub-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;

                &>span:first-child {
                    font-weight: bold;
                    line-height: 14px;
                }

                &>span:last-child {
                    font-size: 12px;
                    line-height: 12px;
                    color: #7d7d7d;
                }
            }

            .content {
                font-size: 12px;
                line-height: 16px;
                text-indent: 2em;
            }

            .button-box {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 10px;

                &>.nut-button {
                    border: none;
                    height: 35px;
                }

                &>.nut-button:first-child {
                    color: #1c1c1c;
                }

                &>.nut-button:last-child {
                    background: #eb49a8;
                    color: #fff;
                }
            }
        }
    }
}
</style>
